<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<link rel="stylesheet" href="css/apaltment.css">
<link rel="stylesheet" href="css/jquery.sPage.css">
<link rel="stylesheet" href="css/jquery.sPage.green.css">
<link rel="stylesheet" href="css/jquery.sPage.red.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.loading{
	width:200px;
	margin-left:45%;
}
    	.num{
            height: 50px;
    		line-height: 50px;
    		text-align: center;
    	}
    	.demo{
            margin-bottom: 20px;
            text-align: center;
        }
        .modal-header{
			background:skyblue !important;
			color:saddlebrown !important;
		}
		.xiangqing:nth-child(2n){
			background:white !important;
		}
		
    </style>
</head>
<body>
<div class="search">
        <form>
        <span class="btn btn-primary add" style="margin-right:10px" data-toggle='modal' data-target='#addHouse'>添加</span>
            <label>
                <span>所属地区：</span>
                <input type="text" id="hregion2" placeholder="输入所属地区">
            </label>
            <label>
                <span>是否双气：</span>
                <select id="hshuangqi2">
                    <option value="">--请选择--</option>
                    <option value="1">有双气</option>
                    <option value="0">无双气</option>
                </select>
            </label>
            <label>
                <span>价格（元）</span>
                <input id="hlowprice2" style="width:85px" type="text" placeholder="最低价格">--
                <input id="hhighprice2" style="width:85px" type="text" placeholder="最高价格">
            </label>
            <button type="button" id="searchByCont" style="margin-left: 25px" class="btn btn-primary">查询</button>
        </form>
    </div>
<table class="table table-bordered" style="margin-top: 20px;">
    
    <thead>
        <tr>
            <th>所属地区</th>
            <th>小区</th>
            <th>是否双气</th>
            <th>价格</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="msg">
        
    </tbody>
</table>
 <img class="noneData" style="display:none" src="images/dataNone.png">
<img class="loading" src="images/loading.gif">
<div id="myPage" class="demo"></div>

<!-- 添加信息 -->
<div class="modal fade" id="addHouse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    <input type="text" id="hfacilities1" hidden>
                    <input type="text" id="hpic1" hidden>
             
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">所属地区</label>
                            <div class="col-sm-10">
                                <input id="hregion1" type="text" class="form-control" placeholder="请输入所属地区">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">所属小区</label>
                            <div class="col-sm-10">
                                <input id="hvillage1" type="text" class="form-control" placeholder="请输入所属小区">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">单元号</label>
                            <div class="col-sm-10">
                                <input id="hunit1" type="text" class="form-control" placeholder="请输入单元号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">房间号</label>
                            <div class="col-sm-10">
                                <input id="hroomnum1" type="text" class="form-control" placeholder="请输入房间号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">朝向</label>
                            <div class="col-sm-10">
                            	<select id="horientation1" class="form-control">
	                            	<option value="东">东</option>
	                            	<option value="南">南</option>
	                            	<option value="西">西</option>
	                            	<option value="北">北</option>
	                            	<option value="东南">东南</option>
	                            	<option value="东北">东北</option>
	                            	<option value="西南">西南</option>
	                            	<option value="西北">西北</option>
	                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">装修</label>
                            <div class="col-sm-10">
                            	<select id="hrenovation1" class="form-control">
	                            	<option value="精装修">精装修</option>
	                            	<option value="简单装修">简单装修</option>
	                            	<option value="豪华装修">豪华装修</option>
	                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">双气</label>
                            <div class="col-sm-10">
                                <select id="hshuangqi1" class="form-control">
	                            	<option value="0">无双气</option>
	                            	<option value="1">有双气</option>
	                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">价格</label>
                            <div class="col-sm-10">
                                <input id="hprice1" type="text" class="form-control" placeholder="请输入价格（元）">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">出租状态</label>
                            <div class="col-sm-10">
                            <select  id="hstate1" class="form-control" disabled>
                            	<option value="0">未租</option>
                            	<option value="1">已租</option>
                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">添加时间</label>
                            <div class="col-sm-10">
                                <input style="line-height:25px" id="haddtime1" type="date" class="form-control" placeholder="请输入添加时间">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="adds" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

<!-- 修改信息 -->
<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    <input type="text" id="hid" name="hid" hidden>
                    <input type="text" id="hfacilities" name="hfacilities" hidden>
                    <input type="text" id="hpic" name="hpic" hidden>
             
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">所属地区</label>
                            <div class="col-sm-10">
                                <input id="hregion" name="hregion" type="text" class="form-control" placeholder="请输入所属地区">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">所属小区</label>
                            <div class="col-sm-10">
                                <input id="hvillage" name="hvillage" type="text" class="form-control" placeholder="请输入所属小区">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">单元号</label>
                            <div class="col-sm-10">
                                <input id="hunit" name="hunit" type="text" class="form-control" placeholder="请输入单元号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">房间号</label>
                            <div class="col-sm-10">
                                <input id="hroomnum" name="hroomnum" type="text" class="form-control" placeholder="请输入房间号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">朝向</label>
                            <div class="col-sm-10">
                                <input id="horientation" name="horientation" type="text" class="form-control" placeholder="请输入朝向">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">装修</label>
                            <div class="col-sm-10">
                                <input id="hrenovation" name="hrenovation" type="text" class="form-control" placeholder="请输入装修">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">双气</label>
                            <div class="col-sm-10">
                                <select id="hshuangqi" name="hshuangqi" class="form-control">
                            	<option value="0">无双气</option>
                            	<option value="1">有双气</option>
                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">价格</label>
                            <div class="col-sm-10">
                                <input id="hprice" name="hprice" type="text" class="form-control" placeholder="请输入价格（元）">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">出租状态</label>
                            <div class="col-sm-10">
                            <select  id="hstate" name="hstate" class="form-control">
                            	<option value="0">未租</option>
                            	<option value="1">已租</option>
                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">添加时间</label>
                            <div class="col-sm-10">
                                <input id="haddtime" name="haddtime" type="text" class="form-control" placeholder="请输入添加时间">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="submit" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>  
</body>
<script src="js/jquery.sPage.js"></script>
<script>
$(function(){
    ajaxPage(1);
});

function ajaxPage(page){
	$.ajax({
		url:"ShowAllHouseServlet",
		dataType:"JSON",
		data:{pageIndex:page},
		success:function(data){
			console.log(data)
			$(".loading").css({"display":"none"})
			var msg = ""
			var sum=data[0].sum
			
			$.each(data,function(i,item){
				
				var state = "";
				if(item.h_state=="0"){
					state = "未租"
				}else if(item.h_state=="1"){
					state = "已租"
				}
				
				var shuangqi = ""
				if(item.h_shuangqi=="0"){
					shuangqi = "无双气"
				}else if(item.h_shuangqi=="1"){
					shuangqi = "有双气"
				}
				
				msg += "<tr>"+
				"<td>"+item.h_region+"</td>"+
				"<td>"+item.h_village+"</td>"+
				"<td>"+shuangqi+"</td>"+
				"<td>"+item.h_price+"元/月</td>"+
				"<td>"+state+"</td>"+
				"<td>"+
					"<span onclick='update("+item.h_id+")' class='btn btn-info addHouse' data-toggle='modal' data-target='#update'>修改</span>"+
					"<span class='btn btn-success' onclick='toDetail("+item.h_id+")'>详情</span>"+
					"<span onclick='deleteById("+item.h_id+","+item.h_state+")' class='btn btn-danger'>删除</span>"+
				"</td>"+
			"</tr>"
			})
			$("#msg").html(msg)
			if(sum==0){
				$(".noneData").css({display:"block"})
				
			}
			$("#myPage").unbind();
			$("#myPage").sPage({
		        page:page,//当前页码，必填
		        total:sum,//数据总条数，必填
		        pageSize:10,//每页显示多少条数据，默认10条
		        showTotal:true,//是否显示总条数，默认关闭：false
		        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
		        noData: false,//没有数据时是否显示分页，默认false不显示，true显示第一页
		        showSkip:false,//是否显示跳页，默认关闭：false
		        showPN:true,//是否显示上下翻页，默认开启：true
		        prevPage:"上一页",//上翻页文字描述，默认“上一页”
		        nextPage:"下一页",//下翻页文字描述，默认“下一页”
		        fastForward: 5,//快进快退页数，默认0表示不开启快进快退
		        backFun:function(page){
		        	//点击分页按钮回调函数，返回当前页码
		            ajaxPage(page)
		            $("#msg").html("")
		            $(".loading").css({"display":"block"})
		        }
		    });
		},
		error:function(err){
			
		}
	})
}

//删除房屋信息
function deleteById(h_id,h_state){
	if(h_state=="1"){
		return alert("该房屋已经被租，无法删除，请先删除用户信息！")
	}else{
		if(confirm("确定删除吗？")){
			$.ajax({
				url:"HouseDeleteByIdServlet",
				dataType:"JSON",
				type:"post",
				data:{h_id:h_id},
				success:function(data){
					alert("删除成功")
					window.location.reload()
				},
				error:function(err){
					alert("删除成功")
					window.location.reload()
				}
			})
		}
	}
}

//获取房屋信息
function update(msg){
	$.ajax({
		url:"HouseServlet",
		dataType:"JSON",
		data:{hid:msg},
		success:function(data){
			console.log(data)
			$("#hid").val(data.h_id)
			$("#hpic").val(data.h_pic)
			$("#hfacilities").val(data.h_facilities)
			$("#hregion").val(data.h_region)
			$("#hvillage").val(data.h_village)
			$("#hunit").val(data.h_unit)
			$("#hroomnum").val(data.h_roomnum)
			$("#hshuangqi").val(data.h_shuangqi)
			$("#horientation").val(data.h_orientation)
			$("#hrenovation").val(data.h_renovation)
			$("#hprice").val(data.h_price)
			$("#hstate").val(data.h_state)
			$("#haddtime").val(data.h_addtime)
		}
	})
}
//修改的数据
$('#submit').click(function() {
	$.ajax({
		url:"UpdateHouse", 
		dataType:"JSON",
		data:{
			"hid":$("#hid").val(),			
			"hregion":$("#hregion").val(),
			"hvillage":$("#hvillage").val(),
			"hunit":$("#hunit").val(),
			"hroomnum":$("#hroomnum1").val(),
			"horientation":$("#horientation").val(),
			"hrenovation":$("#hrenovation").val(),
			"hshuangqi":$("#hshuangqi").val(),
			"hfacilities":$("#hfacilities").val(),
			"hprice":$("#hprice").val(),
			"hstate":$("#hstate").val(),
			"hpic":$("#hpic").val(),
			"haddtime":$("#haddtime").val()
		},
		success:function(data){
			alert("修改成功")
			window.location.reload()
		},
		error:function(err){
			console.log("请求失败")
			console.log(err)
		}
	})
});

//获取房屋信息
$("#hpic1").val("images/house (7).jpg,images/house (8).jpg,images/house (9).jpg")
$("#hfacilities1").val("1,0,0,0,1,0,0,0,1,0,1,0,0,1,1,1,1,1")

//添加信息
$("#adds").click(function(){
	$.ajax({
		url:"Addhouse", 
		dataType:"JSON",
		data:{
			"hregion":$("#hregion1").val(),
			"hvillage":$("#hvillage1").val(),
			"hunit":$("#hunit1").val(),
			"hroomnum":$("#hroomnum1").val(),
			"horientation":$("#horientation1").val(),
			"hrenovation":$("#hrenovation1").val(),
			"hshuangqi":$("#hshuangqi1").val(),
			"hfacilities":$("#hfacilities1").val(),
			"hprice":$("#hprice1").val(),
			"hstate":$("#hstate1").val(),
			"hpic":$("#hpic1").val(),
			"haddtime":$("#haddtime1").val()
		},
		success:function(data){
			alert("添加成功")
			window.location.reload()
		}
	})
})

//按条件查询
$("#searchByCont").click(function(){
	$("#msg").html("")
	$(".loading").css({"display":"block"})
	$(".noneData").css({display:"none"})
	searchByContract(1)
})
function searchByContract(page){
	
	$.ajax({
		url:"ConditionSearch", 
		dataType:"JSON",
		data:{
			"hregion":$("#hregion2").val(),
			"hshuangqi":$("#hshuangqi2").val(),
			"hlowprice":$("#hlowprice2").val(),
			"hhighprice":$("#hhighprice2").val(),
			"pageIndex":page
		},
		success:function(data){
			console.log(data)
			$(".loading").css({"display":"none"})
			var msg = ""
			//var pages=data[0]
			var sum=0
			$.each(data,function(i,item){
				sum = item["sum"]
				
				var state = "";
				if(item["hstate"]=="0"){
					state = "未租"
				}else if(item["hstate"]=="1"){
					state = "已租"
				}
				
				var shuangqi = ""
				if(item["hshuangqi"]=="0"){
					shuangqi = "无双气"
				}else if(item["hshuangqi"]=="1"){
					shuangqi = "有双气"
				}
				
				msg += "<tr>"+
				"<td>"+item["hregion"]+"</td>"+
				"<td>"+item["hvillage"]+"</td>"+
				"<td>"+shuangqi+"</td>"+
				"<td>"+item["hprice"]+"元/月</td>"+
				"<td>"+state+"</td>"+
				"<td>"+
					"<span onclick='update("+item["hid"]+")' class='btn btn-info addHouse' data-toggle='modal' data-target='#update'>修改</span>"+
					"<span class='btn btn-success' onclick='toDetail("+item["hid"]+")'>详情</span>"+
					"<span onclick='deleteById("+item['hid']+","+item["hstate"]+")' class='btn btn-danger'>删除</span>"+
				"</td>"+
			"</tr>"
			})
			$("#msg").html(msg)
			if(sum==0){
				$(".noneData").css({display:"block"})
				
			}
			$("#myPage").unbind();
			$("#myPage").sPage({
		        page:page,//当前页码，必填
		        total:sum,//数据总条数，必填
		        pageSize:10,//每页显示多少条数据，默认10条
		        showTotal:true,//是否显示总条数，默认关闭：false
		        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
		        noData: false,//没有数据时是否显示分页，默认false不显示，true显示第一页
		        showSkip:false,//是否显示跳页，默认关闭：false
		        showPN:true,//是否显示上下翻页，默认开启：true
		        prevPage:"上一页",//上翻页文字描述，默认“上一页”
		        nextPage:"下一页",//下翻页文字描述，默认“下一页”
		        fastForward: 5,//快进快退页数，默认0表示不开启快进快退
		        backFun:function(page){
		        	//点击分页按钮回调函数，返回当前页码
		            searchByContract(page)
		            $("#msg").html("")
		            $(".loading").css({"display":"block"})
		        }
		    });
		},
	})
}


//跳转到详情页
function toDetail(msg){
	window.location.href="house_detail.jsp?h_id="+msg;
}
</script>
</html>